import './boot'
import {myAjaxP} from './tools'

let page = 1;
let page_count = 20;
let hasNextPage = true

const girl_data = ({ type = 'Girl', page = 1, page_count = 20} = {}) => {
    $('.text-center').addClass('Loading')
    myAjaxP({
        url: `/data/category/Girl/type/${type}/page/${page}/count/${page_count}`,
    }).then((res) => {
        const { data } = res
        hasNextPage = !(data.length < page_count)
        if (data.length > 0) {
            data.map(item => {
                const { desc, title, url, _id: id } = item
                $(`<span class="GirlsDetails">${title}</span>
               <a href="show.html?id=${id}"
                  class="GirlsImg"
                  style="background-image: url('${url}')"
               >
                   <span class="Girls-ana">${desc}</span>
               </a>`).appendTo('.GirlsList')
            })
        } else {
            // empty
        }
    }).catch((error) => {
        console.log(error)
    }).finally(() => {
        $('.text-center').removeClass('Loading')
    })
}


/*const girl_data = ({type = 'Girl', page = 1, page_count = 20} = {}) => {
    $.ajax({
        url: `https://gank.io/api/v2/data/category/Girl/type/${type}/page/${page}/count/${page_count}`,
        success(result) {
            $('.text-center').removeClass('Loading')
            const { data } = result
            // data.length < page_count ? hasNextPage = false : hasNextPage = true
            hasNextPage = !(data.length < page_count)
            if (data.length > 0) {
                data.map(item => {
                    // console.log(item)
                    const { desc, title, url, _id: id } = item
                    $('.GirlsList').append(`<span class="GirlsDetails">${title}</span>
                                            <a href="show.html?id=${id}" class="GirlsImg" style="background-image: url('${url}')">
                                                <span class="Girls-ana">${desc}</span>
                                            </a>`)
                })
            } else {
                // empty
            }
        },
        error() {
            $('.text-center').addClass('Loading')
        }
    })
}*/

girl_data()

$('.previous-page').on('click', () => {
    if (page === 1) {
        alert('已经是第一页了！！！')
    }else {
        page -= 1;
        girl_data({page})
    }
})

$('.next-page').on('click', () => {
    if (!hasNextPage) {
        alert('已经是最后一页了！！！')
    }else {
        page += 1;
        girl_data({page, page_count: 20})
    }
})





